<div class="modal-header">
  <h4 class="modal-title">Log in to Mockoon Cloud</h4>
</div>
<div class="modal-body">
  <p>
    A new page should have opened in your default browser for you to log in or
    sign up on Mockoon Cloud. Once completed, the application will automatically
    log you in. <br />If something goes wrong, you can manually enter the token
    displayed on the website below:
  </p>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      [formControl]="tokenControl"
      placeholder="Manually enter the token"
    />
    <div *ngIf="isLoading$ | async" class="input-group-text">
      <app-spinner></app-spinner>
    </div>
  </div>
  <div
    *ngIf="tokenControl.hasError('invalid')"
    class="error-message ms-auto text-center pe-2"
  >
    This token is invalid or cannot be used to log in
  </div>
  <div
    *ngIf="isSuccess$ | async"
    class="success-message ms-auto text-center pe-2"
  >
    You are now logged in
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary modal-close" (click)="close()">
    Close
  </button>
</div>
